<template>
    <div class="navbar">
        <ul>
            <li><i class="icon icon-help"></i></li>
            <li><i class="icon icon-search"></i></li>
            <li>
                <a href="javascript:void(0)" class="select-car-btn">选择车辆</a>
            </li>
            <li><i class="icon icon-location"></i></li>
            <li><i class="icon icon-user"></i></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Navbar"
    }
</script>

<style scoped lang="scss">
.navbar{
    position: fixed;
    bottom: 86px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    li{
        display: inline-block;
        margin: 0 17px;
        vertical-align: middle;
    }
    .select-car-btn{
        display: block;
        margin:0 17px;
        width: 240px;
        height: 84px;
        border-radius: 100px;
        line-height: 84px;
        text-align: center;
        color: #fff;
        font-size: 26px;
        font-weight: 300;
        background-color: $color-main;
    }
}
</style>